<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算题</title>
		<script>
			function editResult() {
				//获取span对象
				var spanElement = document.getElementById("result");
				//解除点击事件
				spanElement.onclick = "";
				//清空
				spanElement.innerHTML = "";
				//创建input对象
				var inputElmement = document.createElement("input");
				//设置元素type属性,可以省略,因为input默认的type就是text
				//inputElmement.type="text";
				//把input添加到span中
				spanElement.appendChild(inputElmement);
				//获取焦点
				inputElmement.focus();
				//绑定键盘事件
				inputElmement.onkeyup = function(event) {
					//获取键盘码,判断用户输入的按键
					var ev = event || window.event;
					var code = ev.keyCode || ev.which;
					if (code == 13) {
						//回车
						spanElement.innerHTML = this.value;
						//判断结果是否正确
						if (this.value == 7) {
							spanElement.style.color = "green";
						} else {
							spanElement.style.color = "red";
							spanElement.style.fontWeight = "bolder";
						}
						//恢复事件
						spanElement.onclick = editResult;
					}
					if (code == 27) {
						//esc
						spanElement.innerHTML = "?";
					}
				}
			}
		</script>
	</head>
	<body>
		2 + 5 = <span id="result" title="点击输入计算结果" onclick="editResult()">?</span>
	</body>
</html>
